import React, { memo, useState } from 'react';
import { Icon, Table } from 'antd';

import EmptyPlaceHolder from '@/pages/SalaryManage/components/EmptyPlaceHolder';

import { numberFormat } from '@/utils/formatterUtil';

import CustomPopover from '@/pages/SalaryManage/Statistics/Perspective/component/CustomPopover';

import styles from './index.less'

const AmtTitle = ({ type }) => (
    <span>合计金额<CustomPopover content={ type === 'addSummaryStructCompare' ? '指已选组织机构的该项薪资合计值' : '指已选组织机构的薪资加项合计值' }/></span>
)

const RateTitle = ({ type }) => (
    <span>占总薪资比重<CustomPopover content={type === 'addSummaryStructCompare' ? '该薪资项合计金额/已选组织机构薪资加项总额*100%' : '该组织机构合计金额/已选组织机构薪资加项总额*100%'}/></span>
)

const columnsFn = type => [
        {
            title: type === 'addSummaryStructCompare' ? '薪资加项' : '组织机构',
            dataIndex: 'itemName',
            key: 'itemName',
            width: '25%',
            render: t => <EmptyPlaceHolder value={t} />
        }, {
            title: <AmtTitle type={type}/>,
            dataIndex: 'itemAmt',
            key: 'itemAmt',
            width: '25%',
            render: t => numberFormat(t, '')
        }, {
            title: <RateTitle type={type}/>,
            dataIndex: 'itemRate',
            key: 'itemRate',
            width: '20%',
            render: t => (t && `${t}%`) || <EmptyPlaceHolder />
        }, {
            title: '参考值',
            dataIndex: 'referenceValueMin',
            key: 'referenceValueMin',
            width: '15%',
            render: t => (t && `${t}%`) || <EmptyPlaceHolder />
        }, {
            title: '差值',
            dataIndex: 'differValue',
            key: 'itemId',
            width: '15%',
            render: t => (t && `${t}%`) || <EmptyPlaceHolder />
        }
    ]

const SalaryContrastDetails = memo(({ contrastData = [], type }) => {
    const [state, setState] = useState(false)
    const changeHandle = e => {
        e.stopPropagation()
        setState(!state)
    }

    const columns = columnsFn(type)

    return (
        <div className={styles.contrastBody}>
            <h3 className={styles.contrastHeader}>
                <span className={styles.contrastTitle}>{ type === 'addSummaryStructCompare' ? '薪资结构' : '组织机构' }对比详情</span>
                <span className={styles.showOrHide} onClick={changeHandle}>
                    {
                        state ? '收起' : '展开'
                    }
                    {
                        state ? <Icon className={styles.showIcon} type="caret-up" /> : <Icon className={styles.showIcon} type="caret-down" />
                    }
                </span>
            </h3>
            {
                state ? (
                    <div className={styles.pb20}>
                        <Table
                            columns={columns}
                            dataSource={contrastData.reverse()}
                            pagination={false}
                            />
                    </div>
                    ) : null
            }
        </div>
    )
})

export default SalaryContrastDetails
